<template>
  <el-aside width="200px">
    <el-scrollbar>
      <el-menu :default-active="$route.fullPath" class="el-menu-vertical-demo" style="height: 100vh" :router="true">
        <!-- <template #title>
              <el-icon><location /></el-icon>
              <span>Navigator One</span>
            </template> -->
        <template v-for="item in rightList" :key="item.path">
          <el-sub-menu :index="item.path" v-if="item.children.length && checkAuth(item.path)">
            <template #title>
              <el-icon>
                <component :is="ElementPlusIconsVue[item.icon]"></component>
                <!-- 遗留问题，调用getIconComponent不能加载成功 -->
                <!-- <component :is="getIconComponent(item.icon)"></component> -->
                <!-- <setting /> -->
              </el-icon>
              {{ item.title }}
            </template>
            <template v-for="subItem in item.children" :key="subItem.path">
              <el-menu-item :index="subItem.path" v-if="checkAuth(subItem.path)">
                <el-icon>
                  <component :is="ElementPlusIconsVue[subItem.icon]"></component>
                  <!-- <component :is="getIconComponent(subItem.icon)"></component> -->
                  <!-- <setting /> -->
                </el-icon>
                <span>{{ subItem.title }}</span>
              </el-menu-item>
            </template>
          </el-sub-menu>
          <el-menu-item :index="item.path" v-else-if="checkAuth(item.path)">
            <el-icon>
              <component :is="ElementPlusIconsVue[item.icon]"></component>
              <!-- <component :is="getIconComponent(item.icon)"></component> -->
              <!-- <setting /> -->
            </el-icon>
            <span>{{ item.title }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<script setup>
import axios from 'axios'
import { onMounted, ref, inject } from 'vue'
const rightList = ref([])
onMounted(async () => {
  const res = await axios.get('/adminapi/rights')
  console.log(res.data)
  rightList.value = res.data
})

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import useUserStore from '../../store/useUserStore'

const { user } = useUserStore()

const checkAuth = (path) => {
  return user.role.rights.includes(path)
}

</script>